<template>
  <div>
    听音乐
    <ul>
      <li v-for="item in list" :key="item">{{ item }}</li>
    </ul>
    <p>歌曲名：{{ name }}</p>
    <!-- <p>air{{ name }}</p> -->
  </div>
</template>

<script>
export default {
  name: "Music",
  props: ["name"],
  computed: {
    // list() {
    //   id类型是Number类型
    //    console.log(this.$route.params.id,"type");
    //   switch (this.$route.params.id) {
    //     case 1:
    //       return ["华语1", "华语2", "华语3"];
    //     case 2:
    //       return ["英语1", "英语2", "英语3"];
    //     case 3:
    //       return ["欧语1", "欧语2", "欧语3"];
    //     default:
    //       return [];
    //   }
    // },
    // list() {
    //   // id类型是Number类型;
    //   // console.log(this.$route.params.id, "type");
    //   switch (this.$route.query.id) {
    //     case 1:
    //       return ["华语1", "华语2", "华语3"];
    //     case 2:
    //       return ["英语1", "英语2", "英语3"];
    //     case 3:
    //       return ["欧语1", "欧语2", "欧语3"];
    //     default:
    //       return [];
    //   }
    // },
    list() {
      // id类型是Number类型;
      // console.log(this.$route.params.id, "type");
      switch (this.$route.query.id) {
        case 1:
          return ["华语1", "华语2", "华语3"];
        case 2:
          return ["英语1", "英语2", "英语3"];
        case 3:
          return ["欧语1", "欧语2", "欧语3"];
        default:
          return [];
      }
    },
  },
  mounted() {
    // console.log(typeof this.$route);
    console.log(this);
  },
};
</script>

<style>
</style>